<template>
	<view>
		<!-- 加载动画 -->
		<!-- <view v-if="pageLoad" class="text-gray padding justify-center flex align-center">
			<u-loading mode="circle" color="#2979ff" size="40"></u-loading>
			<view class="margin-left-sm">加载中...</view>
		</view> -->
		<view>
			<view class="text-gray padding justify-center flex" v-if="Object.keys(worker).length === 0"><text>暂无</text></view>
			<view v-else id="comment-list" class="comment-list">
				<view class="cu-list menu-avatar comment">
					<view class="cu-item" >
						<view class="cu-avatar round"
							:style="'background-image:url('+ worker.avatar +'?x-oss-process=image/resize,m_fixed,w_100' +');'">
						</view>
						<view class="content">
							<view class="text-grey">{{worker.nickname}}</view>
							<view class="text-gray text-content text-df">
								留言：{{task.comment}}
							</view>
							<view class="flex justify-between">
								<view class="text-gray text-df">{{task.accepttime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-tb-xl margin-top-xl">
			<view class="cu-bar foot bg-white justify-end flex">
				<view class="padding-right-xl">
					<button class="cu-btn bg-blue shadow lg" @click="receivingTask" :disabled="task.status">接任务</button>
				</view>
			</view>
		</view>
		<!-- 发布评论组件 -->
		<u-popup v-model="show" mode="bottom">
			<view class="wrap">
				<form @submit="cmFormSubmit" class="">
					<view class="cu-form-group align-start">
						<view class="title">备注</view>
						<textarea name="content" maxlength="-1" placeholder="请输入您的真实姓名和手机号"></textarea>
					</view>
					<view class="flex justify-center padding">
						<button @click="show = false" class="cu-btn shadow margin-right-xl bg-red">取消</button>
						<button formType="submit" class="cu-btn shadow bg-blue">确认</button>
					</view>
				</form>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import mdate from "../common/date.js";
	import {mapGetters} from 'vuex';
	export default {
		props: {
			objectid: "",
			// 接收下面这个参数的目的为了模仿关注,判断自己不能回复自己
			employerId: "",
			worker:{},
			task:{}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		data: function() {
			return {
				show: false
			}
		},
		created: function() {
			// this.getPage();
		},
		methods: {
			//点击接任务触发函数receivingTask
			receivingTask: function() {
				// 先判断一下是不是自己,自己不能评论自己
				if (this.employerId == this.userInfo._id) {
					uni.showToast({
						title: '不能接自己的单',
						icon: 'none'
					})
					return
				}
				this.show = true
			},
			//新接单
			cmFormSubmit:function(e){
				console.log(e);
			var params = e.detail.value;
			if (params.content == '') {
				uni.showToast({
					title: '评论内容不能为空！',
					icon: 'none'
				})
				return
			}
				this.show = false;
				uniCloud.callFunction({
					name: 'task',
					data: {
						cloudAction:"save",
						_id:this.objectid,
						params:{
							status:1,
							comment:params.content,
							workerId:this.userInfo._id
							,accepttime:new Date().Format("yyyy-MM-dd hh:mm:ss")
						}
					}
				}).then((result) => {
					//接任务以后，刷新详情页面
					//或重新跳转页面，利用生命周期里的发请求
					// uni.redirectTo({
					// 		url:"/pages/user/mypublish/detail?id="+this.objectid
					// })
					//用子组件触发父组件的this.getPage
					this.$parent.getPage()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
